import { MciSvgIcon } from '@/components/base';
import { PropType } from 'vue';
import './index.scss';
/**
 *
 * slots: { title,titleRight,footer }
 *
 */
export const MciCard = defineComponent({
  name: 'MciCard',
  props: {
    /* 标题 */
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String as PropType<'card' | 'proportion' | 'prismatic'>,
      default: ''
    },
    isBorder: {
      type: Boolean,
      default: false
    },
    isFull: {
      type: Boolean,
      default: false
    },
    isFooterBorder: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { slots }) {
    const showTitle = computed(() => props.title || slots.title);

    const cardClassNames = computed(() => {
      const fixed = 'p-16 bg-fill-1 rounded-8 mci-card flex flex-col ';
      const isFull = props.isFull ? 'is-full' : '';
      const paddingBottom = slots.footer ? 'pb-0' : '';
      return [fixed, isFull, paddingBottom].join(' ');
    });

    const headerClassNames = computed(() => {
      return `card-header mb-16 ${props.isBorder ? 'bd-bottom-line-2' : ''}`;
    });

    const renderTitle = () => {
      if (slots.title) {
        return slots.title?.();
      }
      return (
        <div class={`flex items-center justify-between card-title min-h-32`}>
          <span class={`flex items-center justify-between ${!props.icon ? 'is-symbol' : ''}`}>
            {props.icon ? (
              <MciSvgIcon
                name={props.icon}
                width={24}
                height={24}
                class={{ '-mb-8 -ml-4': props.icon === 'prismatic' }}
              />
            ) : null}
            <span class="text-value-16__bold ml-4">{props.title}</span>
          </span>
          {slots.titleRight?.()}
        </div>
      );
    };
    const renderFooter = () => {
      return (
        <div
          class={`card-footer flex items-center  justify-end sticky z-100 -bottom-16    h-60 ${
            props.isFooterBorder ? 'is-top-border' : ''
          }`}>
          {slots.footer?.()}
        </div>
      );
    };
    return () => (
      <div class={cardClassNames.value}>
        {showTitle.value ? <div class={headerClassNames.value}>{renderTitle()}</div> : null}
        {slots.default ? <div class={`flex-1 ${props.isFull ? 'flex flex-col' : ''}`}>{slots.default()}</div> : null}
        {slots.footer ? renderFooter() : null}
      </div>
    );
  }
});

/**
 * slots: { titleRight }
 */
export const MciSubCard = defineComponent({
  name: 'MciSubCard',
  props: {
    /* 标题 */
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    bodyPadding: {
      type: Number,
      default: 16
    },
    isBg: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { slots }) {
    const showTitle = computed(() => {
      return !!props.title || !!slots.title || !!slots.titleRight;
    });
    return () => (
      <div class="mci-sub-card">
        {showTitle.value ? (
          <div class="flex justify-between items-center">
            <div
              class={[
                'flex text-value-16__bold items-center',
                {
                  'border-prefix': !props.icon
                }
              ]}>
              {props.icon ? <MciSvgIcon name={props.icon} width={24} height={24} class={{ '-mb-8 -ml-4': props.icon === 'prismatic' }} /> : null}
              <span>{slots?.title?.() || props.title}</span>
            </div>
            {slots?.titleRight?.()}
          </div>
        ) : null}
        {/* <div style={{ padding: props.bodyPadding + 'px' }}>{slots.default?.()}</div> */}
        <div class={'flex-1 bg-fill-1 rounded-8px overflow-auto p-16'}>{slots.default?.()}</div>
      </div>
    );
  }
});
